/*
 * @Author: zhangzhanyan 
 * @Date: 2021-07-21 20:32:00 
 * @Last Modified by: zhangzhnayan
 * @Last Modified time: 2021-07-21 21:13:18
 */

import React, { FC, Component } from 'react';
import { Carousel, WingBlank ,Icon} from 'antd-mobile';
class Carousel111 extends Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 200,
    }
    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
    }
    render() {
        return (
            <div className="Carousel111">
                <WingBlank className="Carousel222">
                    <Carousel
                        autoplay={true}
                        infinite= {true}
                    >
                        {this.state.data.map(val => (
                            <a
                                key={val}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}

                                />
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>
                <div className="box"> <i><Icon type="search" size={"xs"}/></i> 请输入小区或者商圈名称</div>
            </div>
        );
    }
}

export default Carousel111;